<template>
    <div class="flex flex-col h-screen ">
        <div class=" shrink-0">
            <Topbar class="sticky top-0 z-10">
                <div class="h-full text-center grid place-content-center">圈子</div>
                <template #left>
                    <Back />
                </template>
                <template #right>
                    <div class="text-gray-700 h-full flex items-center">
                        <IMdi:shape-circle-add />
                    </div>
                </template>
            </Topbar>
        </div>
        <div class="grow flex text-sm overflow-hidden">
            <div class="w-32 shrink-0 border-r pl-4 pr-2 space-y-4 overflow-y-auto">
                <div class="flex items-center" v-for="(item, index) in [
                    cat1, cat2, cat3, cat4, cat1, cat2, cat3, cat4, cat1, cat2, cat3, cat4, cat1, cat2, cat3, cat4,
                ]" @click="active = index">
                    <div class="w-8 h-10 mr-2 shrink-0 grayscale" :class="{ 'grayscale-0': index == active }">
                        <LazyImage :src="item" />
                    </div>
                    <div class=" line-clamp-1">学习喵学习喵学习喵</div>
                </div>
            </div>
            <div class="grow py-2 px-6 overflow-y-auto">
                <div class=" space-y-6">
                    <div v-for="(item, index) in 20">
                        <div class="flex space-x-2">
                            <div class="w-10 h-10 overflow-hidden border shrink-0 rounded-full">
                                <LazyImage :src="cat1" />
                            </div>
                            <div class="grow">
                                <RouterLink :to="{
                                    name: 'circle-detail',
                                    params: {
                                        id: index
                                    }
                                }">
                                    <div class="leading-10 text-sm line-clamp-1 font-medium">一念之间的婚后生活一念之间的婚后生活</div>
                                </RouterLink>
                                <div class="grid grid-cols-2 text-gray-600">
                                    <div class="flex items-center space-x-1">
                                        <IMingcute:foot-fill class=" text-orange-500" />
                                        <div>3000</div>
                                    </div>
                                    <div class="flex items-center space-x-1">
                                        <IIc:round-article class="text-green-400" />
                                        <div>3000</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import cat1 from '~/assets/circle/cat1.png'
import cat2 from '~/assets/circle/cat2.png'
import cat3 from '~/assets/circle/cat3.png'
import cat4 from '~/assets/circle/cat4.png'
const active = ref(0);
</script>
